<template>
	<view class="content indexC">
		<z-paging ref="paging" @onRefresh="queryList" show-refresher-update-time fixed
			:refresher-end-bounce-enabled="false" :safe-area-inset-bottom="true" :refresher-only="true">
			<!-- 公司信息 -->
			<view class="user-company font40" slot="top">
				<text>川东钻探公司</text>
			</view>
			<view class="index-info flex-left boxS">
				<view class="info-left">
					<image :src="userInfo.cover?userInfo.cover:'../../static/img/photo.png'"></image>
				</view>
				<view class="info-text" v-if="userInfo.user_name">
					<text class="font30">{{userInfo.user_name}}</text>
					<text class="font26">{{userInfo.position_name}}</text>
					<text class="font26" v-if="userInfo.post_name">-{{userInfo.post_name}}</text>
				</view>
				<view class="info-text" v-else @click="loginBtn">
					<text class="font30">暂未登录</text>
					<text class="font26">立即登录</text>
				</view>
			</view>
			<view class="index-btn flex-between boxS">
				<view class="btn-item flex-center font30" @click="urllink('statistics')" hover-class="btns">
					<image src="../../static/img/index_ico4.png" mode="widthFix"></image>
					<text>统计</text>
				</view>
				<view class="btn-item flex-center font30" @click="urllink('msg')" hover-class="btns">
					<image src="../../static/img/index_ico5.png" mode="widthFix"></image>
					<text>消息</text>
					<text class="index-tip font20" v-if="messageCont>0">{{messageCont}}</text>
				</view>
			</view>
			<view class="index-clock flex-center boxS">
				<view class="clock-btn" @click="urllink('clock')" hover-class="btns">
					<image src="../../static/img/index_pic.png" mode="widthFix"></image>
				</view>
			</view>
		</z-paging>

		<lzLoading :showloading='showLoading'></lzLoading>

		<!-- 提示框 -->
		<uni-popup ref="inputDialog" type="dialog">
			<!-- <uni-popup-dialog
				ref="inputClose"
				mode="input"
				title="系统提示"
				value=""
				:beforeClose="true"
				placeholder="请输入手机号码"
				@close="dialogInputClose"
				@confirm="dialogInputConfirm"
			></uni-popup-dialog> -->
			<view style="width:580rpx;border-radius: 10rpx;background-color: #fff;padding: 30rpx;">
				<view style="font-size: 42rpx;text-align: center;margin-bottom: 40rpx;">请登录</view>
				<input class="uni-input" v-model="account" placeholder="请输入账号" maxlength="11"
					style="border: 1px solid #f5f5f5;margin-bottom: 30rpx;height: 88rpx;border-radius: 10rpx;padding-left: 10rpx;" />

				<input class="uni-input" v-model="passWord" type="password" placeholder="请输入密码"
					@confirm="dialogInputConfirm"
					style="border: 1px solid #f5f5f5;margin-bottom: 30rpx; height: 88rpx;border-radius: 10rpx;padding-left: 10rpx;" />
				<checkbox-group @change="onCheckbox" style="margin-bottom: 90rpx;">
					<label>
						<checkbox value="1" />外部员工
					</label>
				</checkbox-group>
				<view
					style="background-color: #008AFF;border-radius: 10rpx;color: #fff;text-align: center;line-height: 96rpx;font-size: 28rpx;"
					@click="dialogInputConfirm">登录</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import lzLoading from '@/components/lz-loading/lz-loading.vue';
	export default {
		components: {
			lzLoading
		},
		data() {
			return {
				showLoading: true,
				userInfo: '', //用户信息
				messageCont: 0, //未读消息
				account: null,
				passWord: null,
				isRole: false
			}
		},
		onLoad() {},
		onShow() {
			this.codeLoginAct((e) => {
				Promise.all([this.getUserInfo()]).then((t) => {
					let sett = setTimeout(() => {
						this.showLoading = false;
					}, 1000);
				});
			});

		},
		methods: {
			onCheckbox({
				detail
			}) {
				this.isRole = detail.value.length !== 0;
				console.log(this.isRole)
			},
			//立即登录
			loginBtn() {
				this.account = '';
				this.passWord = '';
				this.$nextTick(() => {
					this.$refs.inputDialog.open()
				})

			},
			//立即登录
			codeLoginAct(resolve) {
				var query = this.$route.query;
				if (query && query.code) {
					let code = query.code;
					this.$api.codeLogin({
						code: code
					}, true, (res) => {
						console.log(res);
						this.userInfo = res;
						uni.setStorageSync('USERINFO', this.userInfo);
						//保存用户登录状态
						uni.setStorageSync('TOKEN', res.token);
						uni.showToast({
							title: '登录成功'
						});
						uni.switchTab({
							url: '../index/index'
						});
						resolve('success');
					},(error) => {
						resolve('error');
					});
				} else {
					resolve('success');
				}
			},
			//  关闭对话框
			dialogInputClose() {
				this.$refs.inputDialog.close()
			},
			// 确认
			dialogInputConfirm(val) {
				if (!this.account) {
					uni.showToast({
						title: '请输入账号',
						icon: 'none'
					})
					return false
				}
				if (!this.passWord) {
					uni.showToast({
						title: '请输入登录密码',
						icon: 'none'
					})
					return false
				}
				if (!this.isRole) {
					this.$api.normalLogin({
						username: this.account,
						pwd: this.passWord
					}, true, (res) => {
						console.log(res)
						this.userInfo = res;
						uni.setStorageSync("USERINFO", this.userInfo)
						//保存用户登录状态
						uni.setStorageSync("TOKEN", res.token)
						uni.showToast({
							title: '登录成功'
						})
						this.$refs.inputDialog.close()
						resolve("success")
					})
				} else {
					this.$api.postLogin({
						username: this.account,
						passWord: this.passWord
					}, true, (res) => {
						this.userInfo = res;
						uni.setStorageSync("USERINFO", this.userInfo)
						//保存用户登录状态
						uni.setStorageSync("TOKEN", res.token)
						uni.showToast({
							title: '登录成功'
						})
						this.$refs.inputDialog.close()
						resolve("success")
					})
				}

			},

			queryList(pageNo, pageSize) {
				let sett = setTimeout(() => {
					Promise.all([this.getUserInfo()]).then((t) => {
						this.$refs.paging.complete(false);
					})
				}, 1000)
			},

			//获取用户信息
			getUserInfo() {
				return new Promise((resolve, reject) => {
					this.$api.getUserInfo({}, true, (res) => {
						this.userInfo = res.user_info
						this.messageCont = res.message_count
						// uni.setStorageSync("USERINFO",res.user_info)
						resolve("success")
					}, () => {
						this.userInfo = ''
						resolve("fail")
					})
				})
			},

			//页面跳转
			urllink(url) {
				if (this.userInfo == '') {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					return
				}
				// 跳转到消息
				if (url == 'msg') {
					uni.navigateTo({
						url: "../message/index"
					})
				}
				//跳转到统计
				if (url == 'statistics') {
					uni.navigateTo({
						url: "../statistics/index"
					})
				}
				//跳转到打卡
				if (url == 'clock') {
					uni.navigateTo({
						url: "../clock/index"
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.indexC {
		letter-spacing: 1rpx;

		.user-company {
			width: 92%;
			padding: 70rpx 4% 30rpx 4%;
			background: #fff;
			text-align: left;
			font-weight: bold;
		}

		.index-info {
			background: #fff;
			border-radius: 15rpx;
			width: 84%;
			padding: 30rpx 4%;
			margin: auto;
			margin-top: 30rpx;

			image {
				width: 100rpx;
				height: 100rpx;
				margin-right: 20rpx;
				border-radius: 7rpx;
			}

			.info-text {
				font-weight: bold;
				color: #454545;

				text {
					display: block;

					&:last-child {
						margin-top: 15rpx;
						font-weight: 500;
						color: #454545;
					}
				}
			}
		}

		.index-btn {
			background: #fff;
			border-radius: 15rpx;
			width: 84%;
			padding: 30rpx 4%;
			margin: auto;
			margin-top: 30rpx;

			.btn-item {
				width: 45%;
				font-weight: 500;
				color: #454545;

				image {
					width: 44rpx;
					height: 44rpx;
					display: block;
					margin-right: 15rpx;
				}

				.index-tip {
					background: #E01915;
					border-radius: 50rpx;
					padding: 2rpx 10rpx;
					color: #FFFFFF;
					margin-left: 10rpx;
				}
			}
		}

		.index-clock {
			background: #fff;
			border-radius: 15rpx;
			width: 84%;
			padding: 150rpx 4% 280rpx 4%;
			margin: auto;
			margin-top: 30rpx;

			image {
				width: 264rpx;
				height: 264rpx;
			}
		}

	}
</style>
